* Em 1995: foi lançada a **primeira versão -- Livescript**, e em dezembro do mesmo ano, mudou-se para **Javascript 1.0**.
* Em 1996: foi lançada juntamente no navegador Netscape 2.0.
* Foi desenvolvida para rodar no lado do cliente, isto é, a interpretação e o funcionamento dependem de funcionalidades hospedadas no navegador do usuário.
Em 1996: Para que houvesse a evolução da linguagem e também, conseguissem manter um padrão, seus criadores se associaram ao ECMA International (Associação Europeia de Fabricantes de Computadores), e passaram a seguir alguns determinados padrões e normativas.
O nome Javascript já havia sido patenteado pela SUN Microsystems (atual Oracle).
E como o nome Javascript já era famoso, a lingugaem continuou a ser chamada assim.
Especificação: ECMAScript está no registro ECMA-262.
Versão atual ECMAScript | Javascript:
Para aprofundamento, consulte o livro Eloquent Javascript - 3a. Edição.
Texto extraído de Introduction to NodeJS.
.js e executar a instrução node arquivo.js.| Fonte: Autoria própria |
.js¶A inserção do Javascript em uma página web pode ser feita de duas maneiras:
Sintaxe:
Script incorporado no html.
<!-- Script inserido no head ou no body -->
<script>
.... inserir seu código JS aqui ...
</script>
Script externo ao html.
<!-- src deve ser preenchido com o caminho do script -->
<script src="..."></script>
console.log() para ser exibida no console do navegador.<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="estilo.css" />
<title>Static Template</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
// Arquivo script.js
console.log("Ana Paula Müller Giancoli");
innerHTML e textContent¶<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exemplo Javascript</title>
</head>
<body>
<h1> Informações Pessoais </h1>
<div id="id1">
<p>Meu nome é</p>
<p>Utilizando textContent: <span id="texto1"></span></p>
<p>Utilizando innerHTML: <span id="texto2"></span></p>
</div>
<script>
let c = document.getElementById("texto1");
let d = document.getElementById("texto2");
let a = prompt("Nome: ");
c.textContent = a;
d.innerHTML = a;
</script>
</body>
</html>
| Fonte: Autoria própria | Fonte: Autoria própria |
Observações:
Para aprofundamento do assunto, consulte Javascript.info.
O script trava o processamento da página, quando inserido dentro da tag < head > até que seja totalmente carregado. Imagine um script que demore um pouco mais para ser executado ou que exija alguma interação do usuário como uma confirmação.
defer¶O atributo defer indica ao navegador que poderá continuar trabalhando com a página, carregando o script "em segundo plano" e, em seguida, executar o script quando concluir o carregamento.
Sintaxe:
<script defer src="..."></script>
async¶O evento de carregamento dos conteúdos do DOM (DOMContentLoaded) e scripts assíncronos são independentes um do outro:
Observações:
//, no início da linha para indicar um comentário, assim, o resto da linha é ignorado. /*, no início da primeira linha para indicar um comentário e no final do bloco,*/.{ ... }. Exemplo:
Em javascript, o uso de ponto e vírgula ; é para separar as instruções. É importante separar uma instrução final do início da próxima. Poderá ser omitido, caso as instruções sejam escritas em linhas distintas. Caso contrário, é obrigatório.
// Instruções em linhas distintas
a = 3; // poderá ser omitida
b = 4;
// Instruções na mesma linha
c = 10; d = 20; // não poderá ser omitida, passa a ser obrigatória
typeof no console do navegador (F12). typeof para identificação do tipo de dado¶typeof "Ana Paula"
"string"
typeof 70
"number"
typeof 1.88
"number"
typeof "a"
"string"
typeof true
"boolean"
// Não é muito utilizado.
typeof undefined
"undefined"
// Utilizado para iniciar e redefinir um valor posteriormente
let corSelecionada = null;
// Posteriormente a cor é modificada
typeof(null)
"object"
typeof Symbol("id");
"symbol"
typeof(alert)
"function"
variáveis são como nomes simbólicos para os valores em sua aplicação. identificadores são utilizados para nomear constantes, variáveis, propriedades, funções, classes, labels e para certos loops em javascript.identificadores podem começar com underline, caracteres e cifrão, seguidos por números. Porém, nunca começar com números. camelCase.var: declara uma variável e opcionalmente, um valor. (Praticamente não é mais usado!)let: declara uma variável local de escopo do bloco, opcionalmente, inicializando-a com um valor. const: declara uma constante apenas de leitura. É imutável. /* não recomendável */
let nome = "Ana", sobrenome = "Giancoli";
/* ou */
let nome = "Ana",
sobrenome = "Giancoli";
/* ou */
let nome = "Ana";
let sobrenome = "Giancoli";
let a;
| Fonte: Autoria própria |
d + 8; // a variável d não foi declarada
| Fonte: Autoria própria |
| Fonte: Autoria própria |
if (input === undefined) {
...
}
const antes do nome da constante. const x = 10;
const COLOR_RED = #f00;
if (true) {
var x = 5;
}
console.log(x);
if (true) {
let y = 10;
}
console.log(y);
Saída:
| var x = 5; | let y = 10; | |
|---|---|---|
| Fonte: Autoria própria | Fonte: Autoria própria |
console.log(conteúdo) é possível visualizar o resultado do comando no navegador. | String de substituição | Descrição |
|---|---|
| %o | Exibe um link para o objeto javascript. Ao selecionar o link, abre um inspetor. |
| %d ou %i | Exibe um número inteiro. A formatação ainda não possui suporte. |
| %s | Exibe um string. |
| %f | Exibe um número flutuante. A formatação ainda não possui suporte. |
Exemplos
/* Exemplo1 */
let nome = "Ana";
let ano = 2008;
console.log("A profa. %s iniciou no IFSP no ano de %d.", nome, ano);
| Exemplo 1 |
|---|
| Fonte: Autoria própria |
/* Exemplo2 */
let nome = "Ana";
let ano = 2008;
aluguel = 100.94;
console.log("A profa. %s iniciou no IFSP no ano de %d.", nome, ano);
console.log("O aluguel mensal do estacionamento custa em torno de %f.", aluguel);
| Exemplo 2 |
|---|
| Fonte: Autoria própria |
/* Exemplo3 */
let user = new Object();
user.first = "Ana";
user.last = "Giancoli";
user.age = 10.28;
console.log("Olá, %s %s! Seja bem vinda!", user.first, user.last);
console.log("%s tem %i anos!", user.first, user.age);
console.log("%s tem %f anos!", user.first, user.age);
| Exemplo 3 |
|---|
| Fonte: Autoria própria |
/* Exemplo4 */
let url = "http://bra.ifsp.edu.br";
let nome = "IFSP_BRA";
console.log("O site do %s é %o .", nome, url);
| Exemplo 4 |
|---|
| Fonte: Autoria própria |
console.log("Hello World!!");
| Primeiro Programa |
|---|
| Fonte: Autoria própria |
ADS - HTML5, CSS3, JS.
Modelo e formato elaborado pela profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2022.